<template>
 <div class="userManage">
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="状态" class="el_block">
            <el-radio-group v-model="form.status">
                 <el-radio label="全部"></el-radio>
                <el-radio label="未处理"></el-radio>
                <el-radio label="已处理"></el-radio>
            </el-radio-group>
        </el-form-item>
         <el-form-item label="姓名">
            <el-input type="text" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
            <el-input type="text" v-model="form.phone"></el-input>
        </el-form-item>  
        <el-form-item label="反馈内容">
            <el-input type="text" v-model="form.content" placeholder="请输入意见反馈内容关键字查询"></el-input>
        </el-form-item>       
        <el-form-item label="提交时间" class="dateWidth">
            <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
             <el-date-picker type="date" placeholder="选择日期" v-model="form.date2"></el-date-picker>
            </el-col>
        </el-form-item> 
        <el-form-item label="数据来源">
            <el-select v-model="form.source" placeholder="请选择数据来源">
            <el-option label="source1" value="1"></el-option>
            <el-option label="source2" value="2"></el-option>
            </el-select>
        </el-form-item> 
        <el-form-item label-width="80px">
            <el-button type="primary" @click="search">搜 索</el-button>
            <el-button type="success">导出搜索结果</el-button>
        </el-form-item>
    </el-form>
    <el-form class="form2">
        <el-form-item label-width="80px">
            <el-button type="primary" :disabled="this.tableData2.length == 0" @click="batchProcess">批量处理</el-button>
            <el-button type="success" :disabled="this.tableData2.length == 0">批量导出</el-button>
        </el-form-item>
    </el-form>
    
    <el-table :data="tableData2" :row-class-name="tableRowClassName" @selection-change="handleSelectChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="content" label="反馈内容"></el-table-column>
        <el-table-column prop="source" label="数据来源"></el-table-column>
        <el-table-column prop="time" label="提交时间" width="208"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column prop="operation" label="操作">
            <template scope="scope">
                <el-button type="text" size="small" @click.native.prevent="handle(scope.$index, tableData2)">处理</el-button>
                <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.$index, tableData2)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="block">
        <el-pagination :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalNum" :curPage="curPage" @size-change="handleSizeChange" @current-change="handleCurChange">
        </el-pagination>
    </div> 
 </div>
</template>
<script>
    import qs from 'qs'
    export default {
        data() {
            return {
                 form: {
                    status:'',
                    name: '',
                    phone: '',
                    content:'',
                    date1: '',
                    date2: '',
                    source:''
                },
                curPage:1,
                pageSizes:[1,2,3,4],
                pageSize:2, //每页条数默认
                totalNum:2,
                tableData2: [
                    {
                        "id": "2",
                        "name": "翟大款1",
                        "phone":"13526235463",
                        "content":"手机验证码收不到呀！",
                        "source":"学校",
                        "time":"2017-07-16  14：25：02",
                        "status":"未处理",
                        "statusNum":0          
                    },
                    {
                        "id": "152",
                        "name": "翟333",
                        "phone":"126235463",
                        "content":"证码收不到呀！",
                        "source":"学校",
                        "time":"2010-07-16  14：25：02",
                        "status":"已处理",
                        "statusNum":1
                    }
                ],
                idArr:[]
            }
        },
        methods: {
            tableRowClassName(row, index) {
                if (index === 1) {
                    return 'info-row';
                } else if (index === 3) {
                    return 'positive-row';
                }
                return '';
            },
            search(){
                this.$http("../../../static/json/suggest.json",qs.stringify({
                    "status":this.form.status,
                    "name": this.form.name,
                    "phone": this.form.phone,
                    "content":this.form.content,
                    "date1":this.form.date1,
                    "date2": this.form.date2,
                    "source":this.form.source,
                    "curPage":this.curPage,  //当前页
                    "pageSize":this.pageSize //每页条数
                })).then(function(msg){
                    this.tableData2 = msg.data.data;
                    this.totalNum = msg.data.total;
                }.bind(this));
            },
            handle(index, data) {
                if(data[index].statusNum != 1){ //未处理过
                    this.$confirm('本操作仅能执行一次，处理后，该条数据状态由未处理变更为已处理。', '确认执行此操作？', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '已处理!'
                        });
                        data[index].status = "已处理";
                        data[index].statusNum = 1;
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消处理'
                        });          
                    });
                }else{
                    this.tip();  //不能重复处理提示
                }
            },
            tip(){
                this.$message({
                message:'该条数据已处理过，不能重复处理！',
                tupe:'warning'
                });
            },
            deleteRow(index, data){
                 data.splice(index, 1)
            },
            handleSizeChange(val){   //每页条数变化时
                this.pageSize = val;
                this.search();
            },
            handleCurChange(val){  //当前页码时
                this.curPage = val;
                this.search();
            },
            handleSelectChange(val){
                var len = val.length;
                this.idArr.length = 0;
                if(len != 0){
                    for(var obj of val){
                        this.idArr.push(obj.id);
                    }
                }else{
                    return false;
                }
            },
            batchProcess(){
                console.log(this.idArr);
            }
        }
    }
</script>
<style>   
    @import '../../assets/css/userManage.css';    
</style>

